<!-- 引入 Layui 的 CSS 文件，可放在头部 -->
{include file='index/header' /}

<div class="main">
    <div class="contents">
        <div class="top">站内搜索</div>
        <div class="search-container">
            <!-- 将用户昵称、开始时间和结束时间放在同一个 search-formitem 中 -->
            <p class="search-formitem">
                <label for="user-nickname">用户或昵称:</label>
                <input type="text" autofocus autocomplete="off" id="user-nickname" value="{$keywordArr['userNickname'] | default=''}" name="user-nickname" class="layui-input" style="flex: 2;">
                <label for="start-date">开始时间:</label>
                <input type="text" id="start-date" autocomplete="off" name="start-date" value="{$keywordArr['startDate'] | default=''}" class="layui-input" style="flex: 2;">
                <label for="end-date">结束时间:</label>
                <input type="text" id="end-date" autocomplete="off" name="end-date" value="{$keywordArr['endDate'] | default=''}" class="layui-input" style="flex: 2;">
            </p>
            <p class="search-formitem">
                <input type="text" autocomplete="off" name="searchContent" value="{$keywordArr['searchContent'] | default=''}" class="input" id="searchContent" placeholder="输入搜索关键词">
                <button type="button" onclick="
                    const startDate = document.getElementById('start-date').value;
                    const endDate = document.getElementById('end-date').value;
                    const userNickname = document.getElementById('user-nickname').value;
                    const searchContent = document.getElementById('searchContent').value;
                    // 使用对象存储参数
                    const params = {
                        startDate,
                        endDate,
                        userNickname,
                        searchContent
                    };
                    // 过滤掉值为空的参数
                    const filteredParams = Object.entries(params).filter(([_, value]) => value !== '');
                    // 拼接过滤后的参数为查询字符串
                    const keyword = filteredParams.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
                    if (keyword) {
                        const utf8Encoded = encodeURIComponent(keyword).replace(/%([0-9A-F]{2})/g, (match, p1) => {
                            return String.fromCharCode('0x' + p1);
                        });
                        const base64Encoded = btoa(utf8Encoded);
                        const finalEncoded = encodeURIComponent(base64Encoded);
                        window.location.href = `/search/${finalEncoded}/`; 
                    }
                ">搜索</button>
            </p>
        </div>
        <div class="sendMsg"></div>
        {if $keywordArr}
        {include file='index/contents' /}
        {/if}
    </div>

    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            // 渲染开始时间日期选择器
            laydate.render({
                elem: '#start-date'
            });

            // 渲染结束时间日期选择器
            laydate.render({
                elem: '#end-date'
            });
        });
    </script>
    <script src="/static/index/js/setting.js"></script>
    {include file='index/sidebar_index' /}
    {include file='index/footer' /}